<template>
  <div>
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',items.page == 1?'mui-active':'' ]"
            href="#item1mobile"
            data-wid="tab-top-subpage-1.html"
            v-for="items in list"
            :key="items.id"
            @click="getPic(items.page+2)"
          >{{ items.name }}</a>
        </div>
      </div>
    </div>

    <!-- 图片模块 -->
    <ul class="pic">
      <router-link v-for="item in pic" :key="item.createdAt" tag="li" to="/home/picshare/pic">
        <img v-lazy="item.url">
      </router-link>
    </ul>

    <!-- <conponent :is="Cname"></conponent> -->
  </div>
</template>
<script>
import mui from "../../lib/Mui/js/mui.min.js";
import pic from "./pic.vue";
import name from "./name.vue";
import pBlank from "./pBlank.vue";

export default {
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  data: function() {
    return {
      list: [
        { name: "美图", page: 1 },
        { name: "网名", page: 2 },
        { name: "网名", page: 3 },
        { name: "家居生活", page: 4 },
        { name: "摄影设计", page: 5 },
        { name: "明星美女", page: 6 },
        { name: "趣味乡村", page: 7 },
        { name: "热门旅游", page: 8 },
        { name: "科技博览", page: 9 },
        { name: "二次元", page: 10 }
      ],
      pic:[],
      Cname: "p222",
      page:this.$route.params.page
    };
  },
  created(){
       this.getPic(3)
       
  },
   
  methods: {
    getPic(page){
        this.$http.get('meituApi?page='+page).then((result) => {
            // console.log(result.body.data)
            if(result.body.code === 200){
                this.pic = result.body.data
                
            }
        })
    }
  },
  components: {
    p222: pic,
    p221: name,
    p223: pBlank,
    p224: pBlank,
    p225: pBlank,
    p226: pBlank,
    p227: pBlank,
    p228: pBlank,
    p229: pBlank,
    p2210: pBlank
  }
};
</script>


<style lang="scss" >
* {
	touch-action: pan-y
}
img[lazy="loading"] {
  width: 40px;
  height: 300px;
  margin: auto;
}
img {
    width: 100%;
}
.pic {
    list-style: none;
    padding-left: 0;
    // background-color:#eee;
    text-align: center;
    margin: 0 10px;
    
    li {
        box-shadow: 0 0 10px rgba(0, 0, 0, .3);
        margin-bottom: 10px;
        img {
            vertical-align: middle;
        }
    }
    
}
</style>